<template>
  <div class="">
    <Button type="primary" size="small" style="margin-bottom: 10px;" @click="newFilterFormVisible = !newFilterFormVisible">新建</Button>

    <div class="filter-form-wrapper" v-show="newFilterFormVisible">
      <FilterForm ref="filterForm" @saveSuccess="filterFormSaveSuccessHandle"></FilterForm>
    </div>

    <Table ref="table" size="small" :columns="columns" :data="tableData"></Table>

  </div>
</template>

<script>

  import FilterForm from './FilterForm'

  export default {
    name: 'FilterManage',
    components: {
      FilterForm
    },
    data() {
      return {
        columns: [

          {
            type: 'expand',
            width: 50,
            render: (h, params) => {
              return h(FilterForm, {
                props: {
                  filterId: params.row.id
                },
                on: {
                  'saveSuccess': () =>{
                    this.loadFilters();
                  }
                }
              })
            }
          },
          {
            title: '过滤器名称',
            key: 'name'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Poptip', {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '您确定要复制此项吗？'
                  },
                  on: {
                    'on-ok': () => {
                      this.copyFilter(params.row.id)
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      size: 'small',
                      type: 'primary',
                      icon: 'md-copy'
                    },
                    class: {
                      'm-r-5px': true
                    }
                  },)
                ]),
                h('Poptip', {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '您确定要删除此项吗？'
                  },
                  on: {
                    'on-ok': () => {
                      this.deleteFilter(params.row.id)
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      size: 'small',
                      type: 'error',
                      icon: 'md-trash'
                    }
                  },)
                ])
              ]);
            }
          }
        ],

        tableData: [],

        newFilterFormVisible: false
      }
    },
    mounted() {
      this.loadFilters();
    },
    methods: {
      loadFilters () {
        this.$PnApi.FilterApi.getAllFilter().then(result=>{
          this.tableData = result.data.payload
        })
      },
      deleteFilter (id) {
        this.$PnApi.FilterApi.deleteFilter(id).then(result=>{
          if(result.data.success) {
            this.$Message.success(result.data.message);
            this.loadFilters()
          }else {
            this.$Message.error(result.data.message)
          }
        })
      },
      copyFilter (id) {
        this.$PnApi.FilterApi.copyFilter(id).then(result=>{
          if(result.data.success) {
            this.loadFilters()
            this.$Message.success(result.data.message)
          }else {
            this.$Message.error(result.data.message)
          }
        })
      },

      filterFormSaveSuccessHandle () {
        this.newFilterFormVisible = !this.newFilterFormVisible;
        this.$refs.filterForm.$refs.form.resetFields();
        this.loadFilters()
      }
    },
    computed: {}
  }
</script>

<style scoped>
  .filter-form-wrapper {
    border: 1px solid #212121;
    border-radius: 5px;
    padding: 10px;
    background-color: #616161;
    margin-bottom: 10px;
    color: #fff;
  }
  >>> td.ivu-table-expanded-cell {
    padding: 10px 20px 10px 20px;
  }
</style>
